<template>
  <a-modal :visible="show" @cancel="cancel" :width="800" :footer="null">
    <a-tabs v-model="mod" type="card">
      <a-tab-pane :key="1" tab="添加提价任务" :closable="false">
        <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="计划数量">
            <a-input-number v-model="form.m" style="width: 360px;"/>
          </a-form-model-item>
          <a-form-model-item label="出价调整">
            <a-input-number v-model="form.y" style="width: 360px;" /> %
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 1 }">
            <a-button type="primary" :loading="loading" @click="handleOk">
              添加
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="提价任务列表" :closable="false">
        <a-table :columns="columns" :data-source="datasource" :pagination="{showTotal:total => `共 ${total} 条数据`, pageSize: 10}">
          <div slot="y" slot-scope="record" >
            {{record}} %
          </div>
          <div slot="status" slot-scope="record" >
            {{record | getStatus}}
          </div>
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
import { raiseOcpcBid, raiseOcpcBidList } from '@/api/dianshang/dianshang'
export default {
  props: {
    show: Boolean,
    taskId: [String, Number],
  },
  data() {
    return {
      labelCol: { span: 3 },
      wrapperCol: { span: 14 },
      form: {
        y: 0,
        m: 0,
      },
      loading: false,
      mod: 1,
      datasource:[],
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
        },
        {
          title: '计划数量',
          dataIndex: 'm',
        },
        {
          title: '价格调整',
          dataIndex: 'y',
          scopedSlots: {
            customRender: 'y'
          },
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: {
            customRender: 'status'
          },
        },
        {
          title: '创建时间',
          dataIndex: 'create_time',
        },
      ]
    }
  },
  created() {
  },
  methods: {
    getData() {
      const params = {
        task_id: this.taskId,
      }
      raiseOcpcBidList(params).then((res) => {
        if (res.errcode == 0) {
          this.datasource = res.data
        }
      }).catch(() => {
        
      });
    },
    handleOk() {
      const params = Object.assign(this.form, {
        task_id: this.taskId,
      })
      this.loading = true
      raiseOcpcBid(params).then((res) => {
        this.loading = false
        if (res.errcode == 0) {
          // this.cancel()
          this.$message.success('设置成功')
          this.mod = 2
          this.getData()
        }
      }).catch(() => {
        this.loading = false
      });
    },
    cancel() {
      this.$emit('update:show', false)
    }
  },
  filters: {
    getStatus(status) {
      switch (status) {
        case 0:
        case '0':
          return '未执行'
        case 1:
        case '1':
          return '已执行'
      }
    }
  },
  watch: {
    show(status) {
      if (status) {
        this.getData()
        this.form = {
          y: 0,
          m: 0,
        }
      }
    }
  },
}
</script>